<template>
	<view class="dust-control-detail">
		<view class="list-filter">
			<view class="filter-item">{{projectName}}</view><u-line></u-line>
			<view class="filter-item" @click="showDevice = true">
				{{ deviceNameListChild == '' ? deviceNameList[0][0] : deviceNameListChild }}
				<u-icon v-if="showDevice" name="arrow-up" size="14"></u-icon>
				<u-icon v-else name="arrow-down" size="14"></u-icon>
			</view>
			<!-- 设备选择 -->
			<u-picker :show="showDevice" :columns="deviceNameList" @confirm="confirmDevice" @close="closeDevice" @cancel="cancelDevice" @change="onChangeDevice"></u-picker>
			<view class="filter-item" @click="showdate = true">
				{{ dateValueNew == '' ? '日期选择' : dateValueNew }}
			</view><u-line></u-line>
			<!-- 日期选择 -->
			<u-datetime-picker :show="showdate" v-model="dateValue" mode="date" @confirm="confirmDate"
				@close="closeDate" @cancel="cancelDate"></u-datetime-picker>
		</view>
		<view class="box-detail">
			<view class="table">
				<view class="tr">
					<view class="th">时间</view>
					<view class="th">
						<text class="tit">PM10</text>
						<text class="tit">(μg/m³)</text>
					</view>
					<view class="th">
						<text class="tit">PM25</text>
						<text class="tit">(μg/m³)</text>
					</view>
					<view class="th">噪声(dB)</view>
					<view class="th">湿度</view>
					<view class="th">温度</view>
					<view class="th">风速(m/s)</view>
					<view class="th" style="width: 90upx;">风向</view>
				</view>
				<view v-for="(item,index) in sateSites" class="tr">
					<view class="td">{{item.ts}}</view>
					<view class="td">{{item.pm10}}</view>
					<view class="td">{{item.pm25}}</view>
					<view class="td">{{item.noise}}</view>
					<view class="td">{{item.humidity}}</view>
					<view class="td">{{item.temperature}}</view>
					<view class="td">{{item.wind_speed}}</view>
					<view class="td">{{item.wind_direction}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getDeviceCodesByProjectId, singleDeviceLineList } from '@/api/dust-control'
	import {
		getChildren
	} from '@/api/global'
	import {
		AREA_ID
	} from '@/store/mutaction-types'
	
	export default {
		data() {
			return {
				areaId: uni.getStorageSync(AREA_ID),
				showDevice: false,
				columnsDevice: [],
				showdate: false,
				dateValue: Number(new Date()),
				dateValueNew: '',
				projectName: '',
				deviceNameList: [],
				deviceNameListChild: '',
				// 根据项目获取设备参数
				paramsDevice: {
					deviceType: '1',
					projectId: ''
				},
				queryparams: {
					// areaId: '',
					xType: 0,
					startTime: moment().format('YYYY-MM-DD'),
					endTime: moment().format('YYYY-MM-DD'),
					deviceNo: ''
				},
				searchFields: ['pm10','pm25','noise','temperature','humidity','wind_speed','wind_direction'],
				sateSites: []
				// 'pm10,pm25,noise,temperature,humidity,wind_speed,wind_direction,co2,so2,co,o3,tsp,tvoc,pressure'
			}
		},
		onLoad(options){
			this.projectId = options.projectId;
			this.projectName = options.projectName
			const params = {
				projectId: this.projectId,
				projectName: this.projectName
			}
			this.getDeviceList(params)
		},
		methods: {
			// 获取设备列表
			getDeviceList (e) {
				this.paramsDevice.projectId = e.projectId
				getDeviceCodesByProjectId(this.paramsDevice).then(res => {
					const deviceNameListArrData = res.data.data
					const deviceNameListArr = []
					this.deviceNameDeviceNoListArr = []
					deviceNameListArrData.map((a, b) => {
						deviceNameListArr.push(deviceNameListArrData[b].deviceName)
						this.deviceNameDeviceNoListArr.push({
							deviceName: deviceNameListArrData[b].deviceName,
							deviceNo: deviceNameListArrData[b].deviceNo
						})
					})
					this.deviceNameList = [deviceNameListArr]
					// 获取设备编号
					this.deviceNameDeviceNoListArr.map((item, index) => {
						this.deviceNameList.map(() => {
							let deviceCode = ''
							if (this.deviceNameDeviceNoListArr[index].deviceName == this.deviceNameList[0][index]) {
								deviceCode = this.deviceNameDeviceNoListArr[index].deviceNo
							}
							if (e == this.deviceNameDeviceNoListArr[index].deviceName) {
								deviceCode = this.deviceNameDeviceNoListArr[index].deviceNo
							}
							this.queryparams.deviceNo = deviceCode
						})
					})
					this.getList()
				})
			},
			// 获取列表
			getList () {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				const app = this
				const areaIds = []
				let query = ''
				getChildren(app.areaId).then(areas => {
					const ids = areas.data.data
					for (const k in ids) {
						areaIds.push(ids[k].id)
					}
					this.areaIds = areaIds.join(',')
					this.searchFields = this.searchFields.toString()
					for (const k in app.queryparams) {
						query += `&${k}=${app.queryparams[k]}`
					}
					singleDeviceLineList(this.areaIds, this.searchFields, query).then(res => {
						const sateSites = res.data.data
						sateSites.map((item, index) => {
							// 2022-12-20 00
							sateSites[index].ts = sateSites[index].ts.slice(11,15)
						})
						this.sateSites = sateSites
					}).catch(error => {
						uni.$u.toast(error)
					}).finally(() => {
						uni.hideLoading()
					})
				})
			},
			// 时间
			cancelDate() {
				this.showdate = false
			},
			closeDate() {
				this.showdate = false
			},
			confirmDate(e) {
				this.showdate = false
				this.dateValueNew = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.queryparams.startTime = this.dateValueNew
				this.queryparams.endTime = this.dateValueNew
				this.getList()
			},
			// 设备选择操作
			confirmDevice(e) {
				this.deviceNameListChild = e.value[0]
				this.getList()
				this.showDevice = false
			},
			closeDevice() {
				this.showDevice = false
			},
			cancelDevice() {
				this.showDevice = false
			},
			onChangeDevice() {
				// this.showDevice = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dust-control-detail {
		font-size: 28upx;
		height: 100vh;
		.list-filter {
			position: relative;
			.filter-item {
				font-size: 32upx;
				flex-grow: 1;
				padding: 20upx 0;
				display: flex;
				justify-content: center;
				text-align: center;
				font-weight: bold;
				// border-bottom: 1px solid #999;
			}
		}
		.box-detail {
			.detail-tit {
				display: flex;
				justify-content: space-between;
				background-color: $uni-bg-color-hover;
				color: $uni-color-primary;
				padding: 20upx;
				text {
					font-weight: bold;
				}
				.tit {
					display: flex;
					flex-direction: column;
					text {
						display: block;
					}
				}
			}
		}
		
		.table {
			display: table;
			width: 100%;
			border-collapse: collapse;
			margin-bottom: 100px;
			font-size: 24upx;
		}
		.t-title {
			display: table-caption;
			vertical-align: middle;
			text-align: center;
		}
		.th {
			display: table-cell;
			font-weight: bold;
			height: 100%;
			text-align: center;
			vertical-align: middle;
			background-color: $uni-bg-color-hover;
			color: $uni-color-primary;
			padding: 20upx 0;
			.tit {
				display: block;
				line-height: 46upx;
			}
		}
		.tr {
			display: table-row;
			line-height: 72upx;
			border-bottom: 1px solid $uni-bg-color-hover;
		}
		.td {
			display: table-cell;
			height: 100%;
			// width: 100%;
			text-align: center;
			vertical-align: middle;
		}
		
		.sub-table {
			width: 100%;
			// height: 100%;
			display: table;
		}
		.sub-tr {
			display: table-row;
			height: 100%;
		}
		.sub-td {
			display: table-cell;
			height: 100%;
			text-align: center;
			vertical-align: middle;
			// border: 1px solid gray;
		}
	}
</style>
